<template>
	<view class="root">
		<view class="ling-view"></view>

		<view class="input-view">
			机构名称:<input v-model="areaName" class="input" />
		</view>
		
		<view class="input-view">
			机构电话:<input v-model="areaPhone" type="number" class="input" />
		</view>

		<view class="input-view" @click="openAddres">
			所在地区:<view class="input" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{areaCodeDesc}}</view>
		</view>
		
		<view class="input-view" >
			详细地址:<input v-model="address" class="input"></input>
		</view>
		
<!-- 		<view class="input-view" >
			<view class="areaLogoHint">园区logo:</view>
			<image v-if="areaLogo" class="areaLogo" :src="areaLogo" @click="upLoadAreaLogo"></image>
			<image v-else class="areaLogo" src="../../static/icon_add_picture.png" @click="upLoadAreaLogo"></image>
		</view> -->

		<view class="btn" @click="commitClick">提交</view>

		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import utils from '../../utils/utils.js'

	export default {
		components: {
			simpleAddress
		},
		data() {
			return {
				cityPickerValueDefault: [0, 0, 0],

				areaName: '',
				areaPhone: '',
				areaCodeDesc: '',
				address: '',
				areaLogo: '',
			}
		},
		
		onLoad(){
			this.areaName = getApp().globalData.user.org.name;
			this.areaPhone = getApp().globalData.user.org.contactNumber;
			this.areaLogo = getApp().globalData.user.headImgUrl;
			// this.areaLogo = '';

			this.areaCodeDesc = getApp().globalData.user.org.pcaCodeDesc;
			if (utils.isEmpty(this.areaCodeDesc)){
				this.areaCodeDesc = '';
			}

			this.areaCode = getApp().globalData.user.org.pcaCode;
			console.log(this.areaCode);
			if (!utils.isEmpty(this.areaCode)){
				var areaCodeStr = this.areaCode.split(',');
				console.log(this.areaCodeStr);
				this.cityPickerValueDefault = areaCodeStr;
			}
			
			this.address = getApp().globalData.user.org.address;
		},
		
		methods: {
			openAddres() {
				this.$refs.simpleAddress.open();
			},

			onConfirm(e) {
				console.log(e);
				this.areaCodeDesc = e.label;
				this.areaCode = e.value.toString();
			},
			
			upLoadAreaLogo() {
				uni.chooseImage({
				    success: (chooseImageRes) => {
						var that = this;
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						var url = this.$http.config.baseUrl+'eapi/upload/area_logo';
						console.log(url);
						uni.showLoading({})
				        uni.uploadFile({
				            url: url, //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
							header: {
								ticket: getApp().globalData.ticket
							},
				            success: (uploadFileRes) => {
				                console.log(uploadFileRes.data);
								var json = JSON.parse(uploadFileRes.data);
								getApp().globalData.user.headImgUrl = json.data;
								that.areaLogo = json.data;
				            },
							complete: () => {
								uni.hideLoading()
							}
				        });
				    }
				});
			},

			commitClick() {
				var phone = '';
				if (!utils.isEmpty(getApp().globalData.user.mobile)) {
					phone = getApp().globalData.user.mobile;
				}
				if (utils.isEmpty(this.areaName)) {
					uni.showToast({
						title: '请填写园区名称',
						icon: 'none',
					})
					return;
				}
				if (utils.isEmpty(this.areaPhone)){
					uni.showToast({
						title: '请填写园区电话',
						icon: 'none',
					})
					return;
				}
				var isPhone = utils.checkMobile(this.areaPhone);
				var isTel = utils.checkTel(this.areaPhone);
				if (!isPhone & !isTel) {
					uni.showToast({
						title: '请填写正确的联系方式',
						icon: 'none',
					})
					return;
				}
				if (utils.isEmpty(this.areaCodeDesc)) {
					uni.showToast({
						title: '请填写园区所在地区',
						icon: 'none',
					})
					return;
				}
				if (utils.isEmpty(this.address)) {
					uni.showToast({
						title: '请填写园区详细地址',
						icon: 'none',
					})
					return;
				}
				uni.showLoading({});
				var p = {
					areaName: this.areaName,
					areaPhone: this.areaPhone,
					areaCode: this.areaCode,
					areaCodeDesc: this.areaCodeDesc,
					address: this.address,
					phoneNumber: phone,
					realName: '',
				}
				console.log(p);
				this.$http.request({
					method: 'POST',
					url: '/eapi/profile/userinfo',
					params: p
				}).then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.code === '000000'){
						getApp().globalData.user = res.data.user;
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '提交用户信息失败',
						icon: 'none'
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	.root {
		display: flex;
		flex-direction: column;
	}

	.input-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 42rpx;

		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 29px;
		color: rgba(102, 102, 102, 1);
	}

	.input {
		width: 400rpx;
		height: 30px;
		border: 1px solid rgba(221, 221, 221, 1);
		opacity: 1;
		border-radius: 4px;
		margin-left: 10rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		align-self: center;

		width: 120px;
		height: 50px;
		background: rgba(250, 203, 47, 1);
		opacity: 1;
		border-radius: 4px;


		font-size: 18px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 25px;
		color: rgba(255, 255, 255, 1);
		opacity: 1;

		margin-top: 120rpx;
		@include assess-result-share-bg();
	}
	
	.areaLogoHint{
		align-self: flex-start;
	}
	
	.areaLogo{
		width: 200rpx;
		height: 200rpx;
		margin-left: 10rpx;
	}
</style>
